<template>
  <div class="home">
    <p>{{ msg }}</p>
    <button @click="changeMsg">修改msg</button>
  </div>
</template>

<script>
// @ is an alias to /src
// 引入ref使用
import { ref } from 'vue';

export default {
  name: 'HomeView',
  components: {
  },
  // data() {
  //   return {
  //     msg: '你好呀老情人'
  //   }
  // }
  // setup普通写法
  setup() {
    // 不是响应式,不可以同步修改页面的数据
    // let msg = '普通朋友';
    let msg = ref('普通朋友');
    let changeMsg = () => {
      // 改变msg
      // 操作数据需要`.value`
      msg.value = '陈振北'
      console.log('改变数据方法执行了', msg);
    };
    return {
      msg,
      changeMsg
    }
  }
}
</script>
